<template>
  <!-- 卡片 -->
  <el-card class="box-card">
    <!-- 按钮 -->
    <div class="header">
      <el-button
        type="primary"
        icon="el-icon-plus"
        :disabled="!category3Id"
        @click="handleAddSpu"
      >
        添加SPU
      </el-button>
    </div>
    <!-- 表格 -->
    <div class="body">
      <el-table v-loading="loading" :data="records" border style="width: 100%">
        <el-table-column
          type="index"
          align="center"
          label="序号"
          width="50px"
        />
        <el-table-column prop="spuName" align="center" label="SPU名称" />
        <!-- scope:{
            row, 当前行数据
            $index 序号
          } -->
        <el-table-column prop="description" label="SPU描述" align="center" />
        <el-table-column v-slot="{ row }" label="操作" align="center">
          <el-tooltip
            slot="reference"
            effect="dark"
            content="添加SKU"
            placement="top"
          >
            <el-button
              icon="el-icon-plus"
              type="primary"
              size="mini"
              @click="handleSaveSku(row)"
            />
          </el-tooltip>
          <el-tooltip
            slot="reference"
            effect="dark"
            content="修改SPU"
            placement="top"
          >
            <el-button
              icon="el-icon-edit"
              type="warning"
              size="mini"
              @click="handleEditSpu(row)"
            />
          </el-tooltip>
          <el-tooltip
            slot="reference"
            effect="dark"
            content="查看SKU列表"
            placement="top"
          >
            <el-button
              icon="el-icon-info"
              type="info"
              size="mini"
              @click="handleFindSkuInfo(row)"
            />
          </el-tooltip>
          <el-tooltip
            slot="reference"
            effect="dark"
            content="删除SPU"
            placement="top"
          >
            <el-button
              icon="el-icon-delete"
              type="danger"
              size="mini"
              @click="handleDeleteSpu(row)"
            />
          </el-tooltip>
        </el-table-column>
      </el-table>
    </div>
    <!-- 分页器 -->
    <div class="footer">
      <el-pagination
        :current-page="currentPage"
        :page-sizes="[3, 5, 10, 15]"
        :page-size="pageSize"
        layout="prev, pager, next, jumper , total, sizes"
        :total="total"
        :hide-on-single-page="value"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
    <!-- 弹框 -->
    <!-- 添加品牌上传图片 -->
    <el-dialog
      :title="dialogSpuName + ' sku属性列表'"
      :visible.sync="dialogVisible"
    >
      <el-table
        :data="skuInfo"
        :loading="dialogLoading"
        border
        width="450px"
        max-height="450px"
      >
        <el-table-column
          type="index"
          label="序号"
          align="center"
          fixed
          width="100"
        />
        <el-table-column
          prop="skuName"
          label="sku名称"
          align="center"
          width="150"
        />
        <el-table-column
          prop="skuDesc"
          label="sku描述"
          align="center"
          width="200"
        />
        <el-table-column prop="price" label="价格" align="center" width="100" />
        <el-table-column
          prop="weight"
          label="重量"
          align="center"
          width="100"
        />
        <el-table-column
          v-slot="{ row }"
          label="图片"
          align="center"
          width="200"
        >
          <!-- eslint-disable-next-line  -->
          <img class="spu-list-dialog-img" :src="row.skuDefaultImg" />
        </el-table-column>
      </el-table>
    </el-dialog>
  </el-card>
</template>

<script>
import { mapState } from 'vuex'
import { reqDeleteSpu } from '@/api/product/spu'

export default {
  name: 'SpuList',
  data() {
    return {
      // 列表是否显示正在加载中
      loading: false,
      // spu数据列表
      records: [],
      // 控制分页器的显示隐藏
      value: false,
      // 当前页码
      currentPage: 1,
      // 每页条数
      pageSize: 3,
      // 总条数
      total: 1,
      // 响应列表总页数
      pages: '',
      // 弹框是否显示
      dialogVisible: false,
      // sku列表
      skuInfo: [],
      // 弹框显示spu商品名称
      dialogSpuName: '',
      // 弹框sku数据加载状态
      dialogLoading: false
    }
  },
  computed: {
    ...mapState('category', ['category3Id'])
  },
  watch: {
    // 三级分类发生变化时发送请求获取数据
    category3Id: {
      immediate: true,
      async handler() {
        const { category3Id } = this
        if (category3Id) {
          this.getSpuList()
        } else {
          this.records = []
        }
      }
    },
    // 返回数据中总页数发生变化时判断是否小于当前页数，若小于则再请求一次数据
    pages() {
      const { currentPage, pages } = this
      if (currentPage > pages) {
        this.currentPage = pages
        this.getSpuList()
      }
    }
  },
  methods: {
    // 发送请求获取SPU列表
    async getSpuList() {
      const { currentPage, pageSize, category3Id } = this
      this.loading = true
      const { data } = await this.$API.spu.reqGetSpuList({
        page: currentPage,
        limit: pageSize,
        category3Id
      })
      this.loading = false
      this.$message({ type: 'success', message: '获取数据成功' })
      const { records, total, pages } = data
      this.pages = pages
      this.records = records
      this.total = total
    },
    // 每页条数改变
    handleSizeChange(pageSize) {
      this.pageSize = pageSize
      this.getSpuList()
    },
    // 当前页码改变
    handleCurrentChange(currentPage) {
      this.currentPage = currentPage
      this.getSpuList()
    },
    // 删除spu属性
    async handleDeleteSpu(row) {
      await reqDeleteSpu(row.id)
      this.getSpuList()
    },
    // 修改spu属性
    handleEditSpu(row) {
      console.log(row)
      this.$emit('editSpu', { ...row, spuImageList: [], spuSaleAttrList: [] })
      this.$emit('isShow', 2)
    },
    // 添加spu时，清空父组件中存储的spu属性数据
    handleAddSpu() {
      this.$emit('editSpu', { spuImageList: [], spuSaleAttrList: [] })
      this.$emit('isShow', 2)
    },
    // 添加sku，传递spu参数
    handleSaveSku(row) {
      this.$emit('spu', {
        spuName: row.spuName,
        spuId: row.id
      })
      this.$emit('isShow', 3)
    },
    // 查看sku列表
    async handleFindSkuInfo(row) {
      this.skuInfo = []
      this.dialogSpuName = row.spuName
      this.dialogVisible = true
      this.dialogLoading = true
      const { data } = await this.$API.sku.reqFindBySpuId(row.id)
      this.$message({
        type: 'success',
        message: '获取sku列表数据成功'
      })
      this.dialogLoading = false
      this.skuInfo = data
    }
  }
}
</script>

<style lang="scss" scoped>
.header {
  margin-bottom: 20px;
}
.body {
  margin-bottom: 20px;
}
.spu-list-dialog-img {
  width: 100px;
  height: 100px;
}
</style>
